<template>
  <div class="noticeconfig">
    <div class="noticeleft">
      <div class="noticeleftcenter">
        <div class="title">通知</div>
        <div class="baseconfig">基础配置</div>
      </div>
    </div>
    <div class="noticecenter">
      <div>
        <span>优惠券到期提醒：提前</span>
        <el-select v-model="couponExpireNoticeTimeCode" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          >
          </el-option>
        </el-select>
        <span>提醒用户</span>
      </div>
      <div>
        订单未付款：下单后
        <el-input v-model="orderUnPayTime" placeholder=""></el-input>
        分钟，发送通知。
      </div>
      <div>
        <span>待服务通知：用户预约时间点的前</span>
        <el-input v-model="makeNoticeTime" placeholder="" />
        <span>小时，发送通知</span>
      </div>
      <!-- <div>服务中通知：已过约定的总服务时长后 <el-input v-model="serverTimeoutNoticeTime" placeholder=""></el-input> 分钟，发送通知。</div> -->
    </div>
    <div class="noticeright">
      <div class="save" @click="save">保存</div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
const options = [
  { key: "1", value: "1天" },
  { key: "2", value: "2天" },
  { key: "3", value: "3天" },
  { key: "4", value: "4天" },
  { key: "5", value: "5天" },
  { key: "6", value: "6天" },
  { key: "7", value: "7天" }
];
export default {
  props: {
    systemConfigNoticeVo: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      configType: "system_config_inform",
      couponExpireNoticeTimeCode: "",
      id: "",
      makeNoticeTime: "",
      orderUnPayTime: "",
      serverTimeoutNoticeTime: "",
      options
    };
  },
  methods: {
    async save() {
      if (this.orderUnPayTime) {
        const num = Number(this.orderUnPayTime);
        if (isNaN(num)) {
          this.$message.error("订单未付款下单后发送通知时间必须填写数字");
          return false;
        }
      }
      if (this.serverTimeoutNoticeTime) {
        const num = Number(this.serverTimeoutNoticeTime);
        if (isNaN(num)) {
          this.$message.error("已过约定的总服务时长后发送通知时间必须填写数字");
          return false;
        }
      }
      const data = {
        systemConfigNoticeVo: {
          configType: this.configType,
          couponExpireNoticeTimeCode: this.couponExpireNoticeTimeCode,
          makeNoticeTime: this.makeNoticeTime,
          orderUnPayTime: this.orderUnPayTime,
          serverTimeoutNoticeTime: this.serverTimeoutNoticeTime
        }
      };
      if (this.id) {
        data.systemConfigNoticeVo.id = this.id;
      }
      await this.$http({
        url: "/hsssystemadmin/config/system/updateSystemConfig",
        method: "POST",
        data
      }).then(res => {
        this.$message.success("通知基础配置数据保存成功");
        this.$emit("research");
      });
    }
  },
  watch: {
    systemConfigNoticeVo(newvalue) {
      if (newvalue) {
        this.configType = newvalue.configType;
        this.couponExpireNoticeTimeCode = newvalue.couponExpireNoticeTimeCode;
        this.id = newvalue.id;
        this.makeNoticeTime = newvalue.makeNoticeTime;
        this.orderUnPayTime = newvalue.orderUnPayTime;
        this.serverTimeoutNoticeTime = newvalue.serverTimeoutNoticeTime;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.noticeconfig {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  .noticeleft {
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .noticeleftcenter {
      width: 100px;
      height: 70px;
      font-size: 22px;
      .title {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background-color: #f56a23;
        color: #fff;
      }
      .baseconfig {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #aaa;
      }
    }
  }
  .noticeright {
    width: 150px;
    min-height: 150px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .save {
      width: 70px;
      height: 40px;
      font-size: 22px;
      text-align: center;
      color: #fff;
      background-color: #00cb75;
      line-height: 40px;
    }
  }
  .noticecenter {
    // font-size: 14px;
    padding: 20px;
    margin-left: 10px;
    margin-right: 10px;
    min-height: 150px;
    flex: 1;
    background-color: #fff;
    div {
      font-size: 12px;
      margin-bottom: 5px;
    }
    /deep/ .el-input {
      width: 60px;
      height: 30px;
      box-sizing: border-box;
      .el-input__inner {
        width: 60px;
        height: 30px;
        font-size: 12px;
      }
    }
    /deep/ .el-select {
      width: 90px;
      height: 30px;
      box-sizing: border-box;
      .el-input {
        width: 90px;
        height: 30px;
        box-sizing: border-box;
        .el-input__inner {
          padding: 0 10px;
          width: 90px;
          height: 30px;
          box-sizing: border-box;
        }
        .el-icon-arrow-up:before {
          display: inline-block;
          transform: translateY(-5px);
        }
      }
    }
    /deep/ .el-date-editor {
      width: 120px;
      height: 30px;
      box-sizing: border-box;
      .el-input__inner {
        width: 120px;
        height: 30px;
        box-sizing: border-box;
        padding-right: 0px;
      }
      .el-input__icon {
        line-height: 30px;
      }
    }
  }
}
</style>
<style lang="scss" scoped></style>
